<template>
  <div class="box-all">
    <el-dialog width="600px" title="选择充值类型" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-form-item prop="password" label="充值类型">
          <el-input v-model="dialogForm.password" placeholder="请输入充值类型" @keypress.enter="submitHandle" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from './api'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogFormVisible: false,
      dialogForm: {},
    })

    function dialogShow() {
      state.dialogFormVisible = true
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          context.emit('dialogClose', state.dialogForm)
        }
      })
    }

    function dialogClose() {
      dialogFormRef.value.resetFields()
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      dialogClose,
      submitHandle,
    }
  }
}
</script>

<style>
</style>